<template>
  <div id="financeSettleedDiv">
    <!-- <Breadcrumb content="单位财务结算" /> -->
    <!-- <div class="bodyContent"> -->
    <Splitpanes>
      <Pane size="15">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-form :data="searchForm" class="searchform form-input-m">
              <vxe-form-item>
                <vxe-input v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup="keyupEnter" @search-click="findCompanyRow()"></vxe-input>
              </vxe-form-item>
            </vxe-form>
          </template>
        </vxe-toolbar>
        <div class="tableBox">
          <vxe-table ref="companyTableRef" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" @current-change="companyRowClick" :data="companyList" :loading="lloading" height="auto">
            <vxe-column field="companyName" title="送检单位"> </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="85" class="rightPane">
              <div class="elDescBox">
                <el-descriptions :column="10" :labelStyle="{ width: '110px', background: '#fff', color: '#000', textAlign: 'center' }" :contentStyle="{ width: '130px' }" border>
                <template #title>
                  <div class="smallToolTitle">单位信息
                  </div>
                </template>
                <el-descriptions-item label="单位编号">
                  <vxe-input disabled v-model="companyForm.companyCode"></vxe-input>
                </el-descriptions-item>
                <el-descriptions-item label="单位名称">
                  <vxe-input disabled v-model="companyForm.companyName"></vxe-input>
                </el-descriptions-item>
                <el-descriptions-item label="单位简称">
                  <vxe-input v-model="companyForm.alias" disabled></vxe-input>
                </el-descriptions-item>
                <el-descriptions-item label="单位地址">
                  <vxe-input v-model="companyForm.address" disabled></vxe-input>
                </el-descriptions-item>
              </el-descriptions>
              </div>
              <div class="elTabBox">
                <FinanceSettleList ref="financeSettleListRef" />
              </div>
      </Pane>
    </Splitpanes>
    <!-- </div> -->
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { VXETable, VxeFormPropTypes, VxeFormInstance } from 'vxe-table';
import { IsEmpty, formatDateTime, autoIncrementNumber, sortByField } from '@/utils/common';
import FinanceSettleList from './FinanceSettleList.vue';
//暴露属性和方法
defineExpose({
  initPage
});
let searchForm = reactive({
  searchValue: ''
});
let store = AppStore();
let { proxy }: any = getCurrentInstance();
let lloading = ref(false); //弹框表格数据加载状态
let companyList: any = reactive([]); //弹框表格数据
let sltCompany: any = reactive({});

let companyForm = reactive({
  id: null,
  companyCode: '',
  companyName: '',
  companyRules: '',
  inputCode: '',
  alias: '',
  address: '',
  remark: '',
  seq: 1
});
let financeSettleListRef = ref(null);

// 页面加载时更新报告单元/字典
// onMounted(async () => {
//   findCompanyList();
// });

function initPage() {
  findCompanyList();
}

function findCompanyList() {
  lloading.value = true;
  companyList.length = 0; //放入数据前清空数据
  const url = '/lab/inspectCompany/findInspectCompanyList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        // seachValue: searchEqForm.searchValue
      }
    })
    .then((res: any) => {
      companyList.push(...res.data);
      if (companyList.length == 0) {
        sltCompany = {};
        //settleDetailList.length = 0;
      } else {
        const kn = companyList.find((k: any) => k.id == sltCompany.id);
        if (IsEmpty(kn)) {
          companyRowClick({ row: companyList[0] }); //默认选中第一条数据
        } else {
          companyRowClick({ row: kn }); //默认选中第一条数据
        }
      }
      lloading.value = false;
    })
    .catch((err: any) => {
      lloading.value = false;
      VxeMessage('获取获取弹框表格数据异常', VxeNotifyType.error);
    });
}

function companyRowClick({ row }: any) {
  if (IsEmpty(row)) {
    sltCompany = {};
    clearDataForm();
    //settleDetailList.length = 0;
  } else {
    (proxy.$refs.companyTableRef as any)?.setCurrentRow(row);
    sltCompany = row;
    setDataForm(row);
    financeSettleListRef.value.initPage(sltCompany);
  }
}

function findCompanyRow() {
  const kn = companyList.find((k: any) => k.companyCode.includes(searchForm.searchValue) || k.companyName.includes(searchForm.searchValue) || k.inputCode.includes(searchForm.searchValue) || k.alias.includes(searchForm.searchValue));
  if (IsEmpty(kn)) {
    console.log('空');
  } else {
    companyRowClick({ row: kn }); //默认选中第一条数据
  }
}

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findCompanyRow();
  }
}

// 编辑当前行规则
function setDataForm(row: any) {
  companyForm.id = row.id;
  companyForm.companyCode = row.companyCode;
  companyForm.companyName = row.companyName;
  companyForm.companyRules = row.companyRules;
  companyForm.inputCode = row.inputCode;
  companyForm.alias = row.alias;
  companyForm.address = row.address;
  companyForm.remark = row.remark;
  companyForm.seq = row.seq;
}

// 清空中间规则弹框表单
function clearDataForm() {
  companyForm.id = null;
  companyForm.companyCode = '';
  companyForm.companyName = '';
  companyForm.companyRules = '';
  companyForm.inputCode = '';
  companyForm.alias = '';
  companyForm.address = '';
  companyForm.remark = '';
  companyForm.seq = 1;
}
</script>

<style lang="scss" scoped>
#financeSettleedDiv {
  height: 100%;
//   .bodyContent {
//     height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      // table表格
      .tableBox {
        height: calc(100% - 36px);
      }
    }
    .rightPane {
      height: 100%;
      .elDescBox {
        // margin-bottom: 5px;
        .smallToolTitle {
          padding-left: 10px;
          padding-top: 10px;
        }
        :deep(.el-descriptions) {
          padding-left: 1px;

          .el-descriptions__header {
            margin-bottom: 8px;
          }

          .vxe-input--inner,
          .vxe-textarea--inner,
          .vxe-button {
            background-color: transparent;
          }

          .vxe-input--inner[disabled] {
            color: #000;
          }

          // 遮罩层
          .vxe-loading {
            background: transparent;

            .vxe-loading--chunk {
              top: 35px;
            }
          }
        }
      }
      .elTabBox {
        height: calc(100% - 71px);
      }
    }
  //}
}
</style>